<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import {
  IconPlay,
  IconPrevious,
  IconNext,
  IconPageNext,
  IconPagePre,
} from "@/components/icons";
import { useSongAPI } from "@/services/song";
import { usePlayerStore } from "@/stores/player";
import { useRouter } from "vue-router";
const songAPI = useSongAPI();
const playerStore = usePlayerStore();
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
const router = useRouter();

const songs = ref();
const total = ref(0);
const page = ref(1);
const itemsPerPage = 18;

const loadSongs = async (pageNum: number) => {
  const songsResult = await songAPI.getAllSongs(userStore.uid, pageNum);
  const songItems = songsResult.data.items;
  total.value = songsResult.data.total;
  songs.value = songItems.map((item: any) => ({
    id: item.music.musicId,
    name: item.music.musicName,
    artist: item.music.musicAuthor,
    typeId: item.music.musicTypeId,
    url: item.music.musicUrl,
    cover: item.music.musicCoverUrl,
    length: item.music.musicLength,
    status: item.music.status,
    score: item.music.musicAverageScore,
    lyric: item.music.lyric,
    favorStatus: item.favorStatus,
  }));
};

onMounted(() => {
  loadSongs(page.value);
});

const totalPages = computed(() => {
  return Math.ceil(total.value / itemsPerPage);
});

const nextPage = async () => {
  if (page.value < totalPages.value) {
    page.value++;
    await loadSongs(page.value);
  }
};

const previousPage = async () => {
  if (page.value > 1) {
    page.value--;
    await loadSongs(page.value);
  }
};

const handlePlayClick = (event: Event, song: any) => {
  event.stopPropagation(); // 阻止事件冒泡
  playerStore.playSong(song, songs.value);
};

const goToSongDetail = (songId: number) => {
  router.push(`/song/${songId}`);
};
</script>

<template>
  <div class="songs-container pt-8 relative px-12">
    <button
      v-if="page > 1"
      @click="previousPage"
      class="absolute left-4 top-1/2 transform -translate-y-1/2 z-10 transition-all duration-300 hover:scale-110"
    >
      <IconPagePre class="w-10 h-10 text-gray-400 -translate-x-2 transition-colors duration-300 hover:text-gray-600" />
    </button>

    <div class="songs-grid grid grid-cols-3 gap-8">
      <div
        v-for="song in songs"
        :key="song.id"
        class="song-card flex items-center bg-gray-200 cursor-pointer hover:bg-gray-300"
        @click="goToSongDetail(song.id)"
      >
        <div class="song-cover relative w-20 h-20 flex-shrink-0 group">
          <img
            :src="song.cover"
            :alt="song.name"
            class="w-full h-full object-cover"
          />
          <div
            class="play-btn absolute inset-0 bg-black/50 hidden group-hover:flex items-center justify-center"
            @click="handlePlayClick($event, song)"
          >
            <IconPlay class="text-white w-8 h-8" />
          </div>
        </div>
        <div class="song-info flex-grow px-3 min-w-0">
          <h3 class="font-bold text-base truncate">{{ song.name }}</h3>
          <p class="text-gray-500 text-sm mt-1 truncate">{{ song.artist }}</p>
        </div>
        <div class="song-duration px-3 text-gray-400 text-sm flex-shrink-0">
          {{ song.score }}
        </div>
      </div>
    </div>

    <button
      v-if="page < totalPages"
      @click="nextPage"
      class="absolute right-4 top-1/2 transform -translate-y-1/2 z-10 transition-all duration-300 hover:scale-110"
    >
      <IconPageNext class="w-10 h-10 text-gray-400 translate-x-2 transition-colors duration-300 hover:text-gray-600" />
    </button>
  </div>
</template>

<style scoped>
.songs-container {
  overflow: hidden;
}
.banner-slider {
  display: flex;
  transition: transform 0.5s ease;
}
.group:hover .play-btn {
  display: flex;
}
</style>
